<template>
  <div>
    <!-- 探索模块 -->
    <div class="model">
      <div class="logo">
        <img src="@/assets/images/ts.png" alt="" />
      </div>
      <div class="classItem">
        <el-row :gutter="$store.state.device == 'pc' ? 30 : 0">
          <el-col
            :span="span"
            v-for="(item, index) in list"
            :key="index"
            class="el_col"
          >
            <a :href="item.path" target="_blank" v-if="item.name">
              <img :src="item.img" alt="" />
              <p>{{ item.name }}</p>
            </a>
            <template v-else>
              <div class="tiXing">
                <div class="swiper_box">
                  <div class="swiper-contain" ref="swiper-contain">
                    <div class="swiper-wrapper">
                      <div
                        class="swiper-slide"
                        v-for="(item, index) in srcList"
                        :key="index"
                      >
                        <el-row class="el_row" :gutter="20">
                          <el-col
                            :span="12"
                            v-for="(its, ind) in item"
                            :key="index + '' + ind"
                            class="swiper-slide-el_col"
                          >
                            <h1>
                              <span class="num">{{ its.num }}</span>
                              {{ its.title }}
                            </h1>
                            <p>{{ its.des }}</p>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                    <!-- 分页器 -->
                    <div
                      class="swiper-pagination"
                      ref="swiper-pagination"
                      style="text-align: left; padding-right: 60px;bottom:0px;"
                    ></div>
                  </div>
                </div>
              </div>
            </template>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  data() {
    return {
      swiper: null,
      list: [
        {
          name:
            "上海交大徐俊课题组从链霉菌中发现新型酮胺合酶用于合成α-氨基酮... ",
          img: require("@/assets/images/20210105_025634_443.jpg"),
          path: "https://news.sjtu.edu.cn/jdzh/20210105/139509.html"
        },
        {
          name: "上海交大董涛团队发表Ⅵ型蛋白分泌系统合成机制新进展",
          img: require("@/assets/images/20201231_025711_145.jpg"),
          path: "https://news.sjtu.edu.cn/jdzh/20201231/139221.html"
        },
        {
          name: "上海交大生科院研究团队揭示胚珠发生的异步性及其调控机制",
          img: require("@/assets/images/20201228_084421_609.jpg"),
          path: "https://news.sjtu.edu.cn/jdzh/20201228/139121.html"
        },
        {
          name:
            "上海交大韩礼元、陈汉团队在高效稳定钙钛矿太阳能电池模块研究方... ",
          img: require("@/assets/images/20201224_065329_964.jpg"),
          path: "https://news.sjtu.edu.cn/jdzh/20201224/138839.html"
        },
        {
          name: "《物理评论快报》发表ATLAS合作组重质量新粒子态寻找的最新进展",
          img: require("@/assets/images/20201223_081901_778.jpg"),
          path: "https://news.sjtu.edu.cn/jdzh/20201223/138737.html"
        },
        {
          name: ""
        }
      ],
      srcList: [
        [
          {
            num: "4",
            title: "连冠",
            des: "挑战杯”特等奖，全国唯一"
          },
          {
            num: "4",
            title: "连冠",
            des: "挑战杯”特等奖，全国唯一"
          },
          {
            num: "4",
            title: "连冠",
            des: "挑战杯”特等奖，全国唯一"
          },
          {
            num: "4",
            title: "连冠",
            des: "挑战杯”特等奖，全国唯一"
          }
        ],
        [
          {
            num: "17",
            title: "个",
            des: "国家“双一流”学科"
          },
          {
            num: "17",
            title: "个",
            des: "国家“双一流”学科"
          },
          {
            num: "17",
            title: "个",
            des: "国家“双一流”学科"
          },
          {
            num: "17",
            title: "个",
            des: "国家“双一流”学科"
          }
        ],
        [
          {
            num: "633",
            title: "项大奖",
            des: "2019年度学生参与重要赛事获国际奖287项、国家级376项"
          },
          {
            num: "633",
            title: "项大奖",
            des: "2019年度学生参与重要赛事获国际奖287项、国家级376项"
          },
          {
            num: "633",
            title: "项大奖",
            des: "2019年度学生参与重要赛事获国际奖287项、国家级376项"
          },
          {
            num: "633",
            title: "项大奖",
            des: "2019年度学生参与重要赛事获国际奖287项、国家级376项"
          }
        ],
        [
          {
            num: "5",
            title: "个",
            des: "全国A+学科，25个全国A类学科"
          },
          {
            num: "5",
            title: "个",
            des: "全国A+学科，25个全国A类学科"
          },
          {
            num: "5",
            title: "个",
            des: "全国A+学科，25个全国A类学科"
          },
          {
            num: "5",
            title: "个",
            des: "全国A+学科，25个全国A类学科"
          }
        ]
      ]
    };
  },
  computed: {
    span() {
      let col_span = 8;
      switch (this.$store.state.device) {
        case "pc":
          col_span = 8;
          break;
        case "mobile":
          col_span = 24;
          break;
        default:
          col_span = 24;
          break;
      }
      return col_span;
    }
  },
  methods: {
    swiperInit() {
      this.swiper = new Swiper(this.$refs["swiper-contain"], {
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        loop: true,
        pagination: {
          clickable: true,
          el: this.$refs["swiper-pagination"],
          bulletClass: "my-bullet",
          bulletActiveClass: "my-bullet-active"
        }
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.swiperInit();
    });
  }
};
</script>

<style scoped lang="scss">
.model {
  width: $base-width;
  margin: 0 auto;
  padding: 30px 0;
  @media only screen and (min-width: 480px) and (max-width: 1200px) {
    /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
    width: 100%;
  }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    /* 在这里写小屏幕设备的样式 */
    width: 100%;
  }
  .logo {
    margin-bottom: 15px;
    img {
      width: 70%;
      margin: auto;
      display: block;
      @media only screen and (min-width: 480px) and (max-width: 1200px) {
        /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
        width: 100%;
      }
      @media screen and (min-width: 320px) and (max-width: 480px) {
        /* 在这里写小屏幕设备的样式 */
        width: 100%;
      }
    }
  }
  .classItem {
    width: 70%;
    background-color: #f8f2ea;
    padding: 8px;
    @media only screen and (min-width: 480px) and (max-width: 1200px) {
      /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
      width: 100%;
    }
    @media screen and (min-width: 320px) and (max-width: 480px) {
      /* 在这里写小屏幕设备的样式 */
      width: 100%;
    }
    .el_col {
      border-right: 1px solid #999;
      margin-bottom: 15px;
      position: relative;
      padding-bottom: 15px;
      @media only screen and (min-width: 480px) and (max-width: 1200px) {
        /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
        border-right: none;
        border-bottom: 1px solid #999;
        &:last-child {
          height: 210px;
        }
      }
      @media screen and (min-width: 320px) and (max-width: 480px) {
        /* 在这里写小屏幕设备的样式 */
        border-right: none;
        border-bottom: 1px solid #999;
        &:last-child {
          height: 210px;
        }
      }
      &:nth-child(3n + 0) {
        border-right: none;
      }
      a {
        font-size: 10px;
        line-height: 16px;
        transition: 0.3s;
        display: block;
        @media only screen and (min-width: 480px) and (max-width: 1200px) {
          /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
          font-size: 14px;
        }
        @media screen and (min-width: 320px) and (max-width: 480px) {
          /* 在这里写小屏幕设备的样式 */
          font-size: 14px;
        }
        &:hover {
          img {
            transform: scale(1.01);
          }
          color: $base-color;
        }
        img {
          transition: 0.3s;
          width: 100%;
          margin-bottom: 15px;
        }
      }
      .tiXing {
        width: 200%;
        position: absolute;
        left: 15px;
        top: 0;
        background-image: url("../../../assets/images/item_bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        padding: 8px;
        height: 185px; // eslint-disable-line
        @media only screen and (min-width: 480px) and (max-width: 1200px) {
          /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
          width: 100%;
          left: 0;
        }
        @media screen and (min-width: 320px) and (max-width: 480px) {
          /* 在这里写小屏幕设备的样式 */
          width: 100%;
          left: 0;
        }
        .swiper_box {
          width: 70%;
          height: 100%;
          .swiper-contain {
            width: 100%;
            height: inherit;
            overflow: hidden;
            position: relative;
            .swiper-slide {
              .el_row {
                height: inherit;
                color: #ffffff;
                padding: 0 8px;
                .swiper-slide-el_col {
                  height: 50%;
                  h1 {
                    font-size: 12px;
                    font-weight: normal;
                    margin-bottom: 5px;
                    .num {
                      font-size: 16px;
                      font-weight: 500;
                    }
                  }
                  p {
                    font-size: 10px;
                  }
                }
              }
            }
            /deep/ .my-bullet {
              width: 10px;
              height: 10px;
              display: inline-block;
              background-color: rgba($color: #ffffff, $alpha: 0);
              border-radius: 50%;
              border: 1px solid #fff;
              transition: 0.3s;
              margin: 0 5px;
              cursor: pointer;
            }
            /deep/ .my-bullet-active {
              background-color: rgba($color: #ffffff, $alpha: 1);
            }
          }
        }
      }
    }
  }
}
</style>
